<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <el-table border stripe :data="skuList">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" width="100" />
        </template>
      </el-table-column>
      <el-table-column label="重量" prop="weight"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="操作" width="300">
        <template v-slot="{ row }">
          <el-button
            size="small"
            type="info"
            title="上架"
            icon="ele-Top"
            @click="up(row)"
            v-if="row.isSale===0"
          ></el-button>
          <el-button
            v-else
            size="small"
            type="success"
            title="下架"
            icon="ele-Bottom"
            @click="down(row)"
          ></el-button>
          <el-button
            size="small"
            type="primary"
            title="修改"
            @click="editHandel"
            icon="ele-Edit"
          ></el-button>
          <el-button
            size="small"
            type="info"
            title="详情"
            icon="ele-InfoFilled"
            @click="drawerDis(row)"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            title="删除"
            icon="ele-Delete"
            @click="deleteSku(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:page-size="limit"
      v-model:current-page="page"
      :page-sizes="[10, 15, 17, 19]"
      :pager-count="5"
      layout="prev, pager, next,sizes"
      :total="total"
    />
  </el-card>
  <el-drawer v-model="drawer" title="I am the title" :with-header="false" @close="deleClose">
    <el-row>
        <el-col :span="6">名称</el-col>
        <el-col :span="18">{{skuDetail.skuName}}</el-col>
    </el-row>

    <el-row>
        <el-col :span="6">描述</el-col>
        <el-col :span="18">{{skuDetail.skuDesc}}</el-col>
    </el-row>

    <el-row>
        <el-col :span="6">价格</el-col>
        <el-col :span="18">{{skuDetail.price}}</el-col>
    </el-row>

    <el-row>
        <el-col :span="6">平台属性</el-col>
        <el-col :span="18">
            <el-tag  size="small"  effect="dark" v-for="item in skuDetail.skuAttrValueList" :key="item.id">
            {{item.attrName}}-{{item.valueName}}
            </el-tag>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="6">销售属性</el-col>
        <el-col :span="18">
            <el-tag  size="small"  effect="dark" v-for="item in skuDetail.skuSaleAttrValueList" :key="item.id">
            {{item.saleAttrName}}-{{item.saleAttrValueName}}
            </el-tag>
        </el-col>
    </el-row>

    <el-row>
        <el-col :span="6">商品图片</el-col>
        <el-col :span="18">
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="item in skuDetail.skuImageList" :key="item.id">
                <el-image :src="item.imgUrl" :lazy="true" width="150" height="150"></el-image>
                </el-carousel-item>
            </el-carousel>
        </el-col>
    </el-row>

  </el-drawer>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "Sku",
});
</script>

<script lang="ts" setup>
    import { onMounted, ref , watch} from "vue";
    import { requestSkuList ,requestOnSale, requestCancelSale ,requestDeleteSku} from "@/api/sku";
    import { type SkuInfoListType ,type SkuInfoItemType ,requestFindById} from "@/api/sku";
    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);

    //初始化数据
    const skuList = ref<SkuInfoListType>([])
    
    //封装发送请求函数
    const getPageList = async () => {
        try {
            const  re = await requestSkuList(page.value, limit.value);
            skuList.value = re.records;
            total.value = re.total
        } catch (error) {
            ElMessage.error("请求sku列表失败")
        }
    }

    //初始化请求数据
    onMounted(() => {
        getPageList()
    })

    //监听page limit
    watch([page,limit],() => {
        getPageList()
    })

    //上架
    const up = async(row:SkuInfoItemType) => {
        
        try {
            await requestOnSale(row.id as number);
            ElMessage.success("上架成功")
            getPageList()
        } catch (error) {
            ElMessage.error("上架失败")
        }
    }   

    //下架
    const down = async(row:SkuInfoItemType) => {
        try {
            await requestCancelSale(row.id as number);
            ElMessage.success("下架成功")
            getPageList()
        } catch (error) {
            ElMessage.error("下架失败")
        }
    }   

    //修改逻辑
    const editHandel = () => {
        ElMessage.info("正在发送请求....")
    }

    //删除逻辑
    const deleteSku = async (row:SkuInfoItemType) => {
        try {
            await requestDeleteSku(row.id as number);
            ElMessage.success("删除成功")
            getPageList()
        } catch (error) {
            ElMessage.error("删除失败")
        }
    }
    //控制抽屉的显隐
    const drawer = ref(false);

    //接受详情数据
    const skuDetail = ref<SkuInfoItemType>({
        price: 0,
        skuName: "",
        skuDesc: "",
        weight: "",
        category3Id:null,
        skuDefaultImg:"",
        skuImageList: [],
        skuAttrValueList: [],
        skuSaleAttrValueList: [],
    })

    //sku详情
    const drawerDis = async (row:SkuInfoItemType) => {
        drawer.value = true;
        //发送请求
        try{   
            const re = await requestFindById(row.id as number);
            skuDetail.value = re
        }catch(e){
            ElMessage.error("获取详情失败")
        }
    }

    //
    const deleClose = () => {
        skuDetail.value = {
            price: 0,
            skuName: "",
            skuDesc: "",
            weight: "",
            category3Id:null,
            skuDefaultImg:"",
            skuImageList: [],
            skuAttrValueList: [],
            skuSaleAttrValueList: [],
    }
    }

</script>

<style scoped></style>
